<template>
    <view class="avatar-container" :style="{ backgroundColor: randomColor, width: size + 'rpx', height: size + 'rpx' }">
        <image v-if="imgUrl" class="avatar-image" :src="imgUrl" mode="aspectFill" />
        <text v-else class="avatar-text">{{ displayText ? displayText.charAt(0) : '' }}</text>
        
    </view>
</template>

<script>
export default {
    props: {
        imgUrl: {
            type: String,
            default: ''
        },
        displayText: {
            type: String,
            default: ''
        },
        size: {
            type: Number,
            default: 80
        }
    },
    computed: {
        randomColor() {
            // 生成柔和色调（H:0-360, S:25%-45%, L:85%-95%）
            const h = Math.floor(Math.random() * 360);
            const s = Math.floor(Math.random() * 20 + 25);
            const l = Math.floor(Math.random() * 10 + 85);
            return `hsl(${h},${s}%,${l}%)`;
        }
    }
};
</script>

<style scoped>
.avatar-container {
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-image {
    width: 100%;
    height: 100%;
}

.avatar-text {
    color: #ffffff;
    font-weight: 500;
    font-size: calc(0.6 * var(--size));
    user-select: none;
}
</style>